<template>
  <div class='m-lesson_classesDetail'>
    <el-form class="m-lesson_classesDetail_form" ref='form' label-width="120px" :model="form" :rules='rules'>
      <el-form-item label="班级名称：" prop='name'>
        <el-input type="text" placeholder="请输入班级名称" v-model.trim="form.name"></el-input>
      </el-form-item>
      <el-form-item label="备注：" prop='memo'>
        <el-input type="textarea" :rows='5' placeholder="请重新输入备注" v-model.trim="form.memo"></el-input>
      </el-form-item>
      <el-form-item label='选择学员：'>
        <ul class="list">
          <li
            v-for='(v, i) in intentsData'
            :key='v.id'
          >
            <span>{{ v.short_name || v.name }}</span><i class='el-icon-close' @click='deleteIntents(i)'></i>
          </li>
          <li @click='showDialog("student")'><i class='el-icon-plus'></i></li>
        </ul>
      </el-form-item>
      <el-form-item label='选择教师：'>
        <ul class="list">
          <li
            v-for='(v, i) in staffData'
            :key='v.id'
          >
            <span>{{ v.name }}</span><i class='el-icon-close' @click='deleteStaff(i)'></i>
          </li>
          <li @click='showDialog("teacher")'><i class='el-icon-plus'></i></li>
        </ul>
      </el-form-item>
      <el-form-item align='right'>
        <el-button type="primary" @click="create">{{ isAdd ? '添加班级' : '修改班级' }}</el-button>
        <!-- <el-button type="primary" @click="cancel">取消</el-button> -->
      </el-form-item>
    </el-form>

    <!-- 选择 dialog -->
    <select-list ref='student' @getData='getStudent' title='选择学生' listPath='crmGetIntents' />
    <select-list ref='teacher' @getData='getTeacher' title='选择教师' listPath='firmGetStaffs' />
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import selectList from '@/module/lesson/components/selectList'

export default {
  name: 'm-lesson_classes_add',

  components: {
    selectList
  },

  data() {
    return {
      data: [],
      ifRequesting: false,
      selectId: '',
      form: {
        name: '',
        memo: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入班级名称', trigger: 'blur' },
          { min: 2, message: '长度至少 2 个字符', trigger: 'blur' }
        ]
      },
      isAdd: true,
      dialogVisible: false,
      staffData: [],
      intentsData: []
    }
  },

  mounted() {
    const { id } = this.$route.query
    if (!id) return false
    this.selectId = id
    this.isAdd = false
    this.getDetail(id)
  },

  methods: {
    ...mapMutations(['setTabRoutes']),

    routerPush(type, args) {
      // push 到缓存里
      this.setTabRoutes({ type: 'add', obj: { ...this.getRouterInfoAccordingName(type), ...args } })
    },

    getTeacher(data) {
      this.staffData = data
    },

    getStudent(data) {
      this.intentsData = data
    },

    deleteIntents(i) {
      this.$refs.student.deleteObj(i)
    },

    deleteStaff(i) {
      this.$refs.teacher.deleteObj(i)
    },

    showDialog(type) {
      this.$refs[type].show()
    },

    async getDetail(id) {
      const { code, data } = await this.$api.courseGetClassInfo({ aId: id })
      if (code === 0) {
        this.form.name = data.name
        this.form.memo = data.memo
        this.$refs.student.setData(data.students)
        this.$refs.teacher.setData(data.teachers)
      }
    },

    create() {
      if (this.ifRequesting) return
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        const { name, memo } = this.form
        this.ifRequesting = true
        const { code } = await this.$api[this.isAdd ? 'courseCreateClasses' : 'courseModifyClass']({
          aMerchantId: this.aFirmId,
          aName: name,
          aMemo: memo,
          aStudentIds: this.intentsData.map(v => v.id),
          aTeacherIds: this.staffData.map(v => v.id),
          aId: this.selectId || ''
        })
        this.ifRequesting = false
        if (code === 0) {
          this.__notify('提示', `${this.isAdd ? '添加成功' : '修改成功'}`)
          this.routerPush('lesson_classes')
          this.$router.push({ name: 'lesson_classes' })
        }
      })
    }
  }
}
</script>

<style lang='less'>
.m-lesson_classesDetail {
  &_form {
    .list {
      display: flex;
      flex-wrap: wrap;
      li {
        margin-right: 30px;
        // width: 100px;
      }
    }
  }
}
</style>